<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具箱 - 图片压缩</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-4">
                    <a href="#" class="flex items-center space-x-2">
                        <i class="fas fa-tools text-blue-600 text-2xl"></i>
                        <span class="font-bold text-xl text-blue-600">工具箱</span>
                    </a>
                </div>
                
                <div class="w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索工具..." class="w-full py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                        <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-star mr-1"></i>收藏
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-clock mr-1"></i>历史
                    </a>
                    <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                        <i class="far fa-user-circle text-2xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="bg-green-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">图片压缩</h1>
                    <p class="mt-2">无损压缩图片，减小文件大小，提高网页加载速度</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="#" class="hover:underline">首页</a>
                        <span>/</span>
                        <a href="#" class="hover:underline">图片工具</a>
                        <span>/</span>
                        <span class="font-medium">图片压缩</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏工具列表 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-xl font-bold mb-6 text-gray-800">图片处理工具</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="flex items-center text-green-600 font-medium">
                                <div class="w-8 text-center">
                                    <i class="fas fa-compress-arrows-alt"></i>
                                </div>
                                <span>图片压缩</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-crop-alt"></i>
                                </div>
                                <span>图片裁剪</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-sync-alt"></i>
                                </div>
                                <span>格式转换</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-object-group"></i>
                                </div>
                                <span>图片拼接</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-tint"></i>
                                </div>
                                <span>水印添加</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-adjust"></i>
                                </div>
                                <span>滤镜效果</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-expand-arrows-alt"></i>
                                </div>
                                <span>尺寸调整</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 最近使用记录 -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                    <h2 class="text-xl font-bold mb-4 text-gray-800">最近使用</h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-green-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-compress-arrows-alt text-green-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>图片压缩</span>
                                    <p class="text-xs text-gray-500">5分钟前</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-blue-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-text-height text-blue-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>文本转换</span>
                                    <p class="text-xs text-gray-500">昨天</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center text-gray-600 hover:text-purple-600">
                                <div class="w-8 text-center">
                                    <i class="fas fa-code text-purple-500"></i>
                                </div>
                                <div class="flex-1">
                                    <span>JSON格式化</span>
                                    <p class="text-xs text-gray-500">3天前</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 主工具区域 -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <!-- 工具说明 -->
                    <div class="mb-6">
                        <h2 class="text-xl font-bold text-gray-800 mb-3">图片压缩</h2>
                        <p class="text-gray-600">
                            无损压缩您的图片，大幅减小文件体积而保持图片质量。适用于网站优化、邮件附件、社交媒体分享等多种场景。
                        </p>
                    </div>
                    
                    <!-- 上传区域 -->
                    <div class="mb-6">
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-green-500 transition-colors">
                            <div class="space-y-4">
                                <i class="fas fa-cloud-upload-alt text-5xl text-gray-400"></i>
                                <h3 class="text-lg font-medium text-gray-800">拖拽文件到此处或点击上传</h3>
                                <p class="text-gray-600">支持 JPG, PNG, WebP, GIF等格式，单文件最大20MB</p>
                                <button class="bg-green-600 text-white py-2 px-6 rounded-md hover:bg-green-700 font-medium">
                                    选择图片文件
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 压缩设置 -->
                    <div class="mb-6">
                        <h3 class="font-bold text-gray-800 mb-3">压缩设置</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 mb-2">压缩质量</label>
                                <div class="flex items-center">
                                    <input type="range" min="40" max="100" value="85" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                                </div>
                                <div class="flex justify-between mt-1 text-sm text-gray-500">
                                    <span>压缩优先</span>
                                    <span>85%</span>
                                    <span>质量优先</span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-gray-700 mb-2">输出格式</label>
                                <select class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                    <option>原始格式（保持不变）</option>
                                    <option>JPG</option>
                                    <option>PNG</option>
                                    <option>WebP (推荐)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 mb-2">调整尺寸</label>
                                <div class="flex items-center">
                                    <div class="relative flex-1">
                                        <input type="text" placeholder="宽度" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                        <span class="absolute right-3 top-2 text-gray-400">px</span>
                                    </div>
                                    <span class="mx-2 text-gray-500">x</span>
                                    <div class="relative flex-1">
                                        <input type="text" placeholder="高度" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-green-500 focus:border-green-500">
                                        <span class="absolute right-3 top-2 text-gray-400">px</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex items-center">
                                    <input type="checkbox" id="preserve_ratio" class="h-4 w-4 text-green-600" checked>
                                    <label for="preserve_ratio" class="ml-2 text-gray-700">保持原始比例</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="checkbox" id="remove_metadata" class="h-4 w-4 text-green-600" checked>
                                    <label for="remove_metadata" class="ml-2 text-gray-700">移除元数据（推荐）</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 预览区域 -->
                    <div class="mb-6 border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">图片处理预览</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 示例图片，实际应用中会显示上传的图片 -->
                            <div>
                                <h4 class="text-sm font-medium text-gray-700 mb-2">原始图片</h4>
                                <div class="relative bg-gray-100 rounded-md overflow-hidden flex items-center justify-center h-64">
                                    <img src="https://images.unsplash.com/photo-1682687982360-35b7c48bd19f?q=80&w=1000" alt="原始图片" class="max-w-full max-h-full">
                                    <div class="absolute bottom-2 right-2 bg-gray-800 bg-opacity-75 text-white px-2 py-1 rounded text-xs">
                                        2.3 MB • 1920 x 1080 px
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-sm font-medium text-gray-700 mb-2">压缩后预览</h4>
                                <div class="relative bg-gray-100 rounded-md overflow-hidden flex items-center justify-center h-64">
                                    <img src="https://images.unsplash.com/photo-1682687982360-35b7c48bd19f?q=80&w=1000" alt="压缩后预览" class="max-w-full max-h-full">
                                    <div class="absolute bottom-2 right-2 bg-green-800 bg-opacity-75 text-white px-2 py-1 rounded text-xs">
                                        426 KB • 1920 x 1080 px • 节省 82%
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-6 flex flex-wrap gap-3 justify-center">
                            <button class="bg-green-600 text-white py-3 px-6 rounded-md hover:bg-green-700 font-medium flex items-center">
                                <i class="fas fa-download mr-2"></i>下载压缩图片
                            </button>
                            <button class="bg-gray-200 text-gray-700 py-3 px-6 rounded-md hover:bg-gray-300 font-medium flex items-center">
                                <i class="fas fa-redo-alt mr-2"></i>重新上传
                            </button>
                            <button class="bg-gray-200 text-gray-700 py-3 px-6 rounded-md hover:bg-gray-300 font-medium flex items-center">
                                <i class="fas fa-cog mr-2"></i>调整设置
                            </button>
                        </div>
                    </div>
                    
                    <!-- 批量处理 -->
                    <div class="mb-6 border-t border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="font-bold text-gray-800">批量处理队列</h3>
                            <button class="text-green-600 hover:underline text-sm flex items-center">
                                <i class="fas fa-plus mr-1"></i> 添加更多图片
                            </button>
                        </div>
                        <div class="border border-gray-300 rounded-md overflow-hidden">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">文件名</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原始大小</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">压缩后大小</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">photo-1.jpg</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                完成
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.3 MB</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">426 KB</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <button class="text-green-600 hover:text-green-800 mr-3">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">sunset.png</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                处理中
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4.7 MB</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <button class="text-gray-400 cursor-not-allowed mr-3">
                                                <i class="fas fa-download"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-800">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <button class="text-gray-700 hover:text-red-600 text-sm flex items-center">
                                <i class="fas fa-trash-alt mr-1"></i> 清空列表
                            </button>
                            <button class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 text-sm font-medium">
                                下载所有压缩图片
                            </button>
                        </div>
                    </div>
                    
                    <!-- 说明和提示 -->
                    <div class="border-t border-gray-200 pt-6">
                        <h3 class="font-bold text-gray-800 mb-3">使用提示</h3>
                        <div class="text-gray-600 space-y-2">
                            <p>•&nbsp;&nbsp;图片压缩通常能减小60-80%的文件体积，同时几乎不影响视觉质量</p>
                            <p>•&nbsp;&nbsp;WebP格式通常提供最佳的压缩效果，但要注意兼容性</p>
                            <p>•&nbsp;&nbsp;移除元数据可以进一步减小文件大小</p>
                            <p>•&nbsp;&nbsp;同时调整尺寸和压缩质量效果最佳</p>
                        </div>
                        
                        <div class="mt-6 bg-blue-50 p-4 rounded-md">
                            <h4 class="font-medium text-blue-800 mb-2">安全提示</h4>
                            <p class="text-blue-700 text-sm">
                                我们重视您的隐私，所有图片处理都在您的浏览器中进行，不会上传到服务器。图片信息和元数据会在处理过程中被移除。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 相关工具 -->
                <div class="mt-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-4">相关工具</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-green-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-crop-alt text-green-600 mr-2"></i>
                                    <h3 class="font-bold">图片裁剪</h3>
                                </div>
                                <p class="text-gray-600 text-sm">裁剪图片到指定尺寸或比例</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-green-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-sync-alt text-green-600 mr-2"></i>
                                    <h3 class="font-bold">格式转换</h3>
                                </div>
                                <p class="text-gray-600 text-sm">在PNG、JPG、WebP等格式间相互转换</p>
                            </div>
                        </a>
                        
                        <a href="#" class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden flex">
                            <div class="bg-green-500 w-2"></div>
                            <div class="p-4 flex-1">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-tint text-green-600 mr-2"></i>
                                    <h3 class="font-bold">水印添加</h3>
                                </div>
                                <p class="text-gray-600 text-sm">为图片添加文字或图片水印</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">工具箱是一个提供各种在线工具的平台，旨在为用户提供便捷、高效的在线工具服务。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">热门工具</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">图片压缩</a></li>
                        <li><a href="#" class="hover:text-white">JSON格式化</a></li>
                        <li><a href="#" class="hover:text-white">文本转换器</a></li>
                        <li><a href="#" class="hover:text-white">单位换算</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常用链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">使用指南</a></li>
                        <li><a href="#" class="hover:text-white">用户协议</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 工具箱 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html> 